<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>产品详情</title>
    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <link rel="stylesheet" href="./css/vant@2.12.54.css" />
    <link rel="stylesheet" href="./css/product_details.css" />
    <link rel="stylesheet" href="./css/nav.css" />
    <style>
      .my-v-cloak {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="product_details my-v-cloak" id="app" v-cloak>
      <div class="banner">
        <img :src="banner || './img/banner_2.png'" alt="" />
        <div class="btn" @click="goBack"></div>
      </div>
      <div class="list_1">
        <div class="centent">
          <h4 class="f16">{{goodsDetail.goods_name}}</h4>
          <p>{{goodsDetail.sku}}</p>
        </div>
      </div>
      <div class="list_2">
        <div class="centent">
          <div class="top">
            <h6>产品介绍</h6>
          </div>
          <div v-html="goodsDetail.content"></div>
        </div>
      </div>
      <div class="buttom">
        <a :href="'tel:' + details.mobile" class="btn">
          <span>立即购买</span>
        </a>
      </div>
    </div>
  </body>
  <script src="./js/vue@2.7.14.js"></script>
  <script src="./js/element-ui@2.15.14.js"></script>
  <script src="./js/axios@1.5.0.min.js"></script>
  <script src="./js/vant@2.12.54.min.js"></script>
  <script src="./js/request.js"></script>
  <script>
    new Vue({
      el: "#app",
      data() {
        return {
          show: true,
          show_1: false,
          goodsDetail: [],
          details: [],
          banner: false,
        };
      },
      mounted() {
        document.getElementById("app").classList.remove("my-v-cloak");
        this.fetchData();
        this.aboutData();
      },

      methods: {
        //获取产品详情数据
        fetchData() {
          const url = baseUrl + "/goods.Goods/goodsDetail";
          const urlParams = new URLSearchParams(window.location.search);
          // 获取 id 参数对应的值
          const productId = urlParams.get("id");
          axios({
            url: url,
            method: "post",
            params: {
              app_id: 10001,
              goods_id: productId,
            },
          })
            .then((res) => {
              // 处理响应结果
              this.goodsDetail = res.data.data.detail;
              this.banner = res.data.data.detail.image.file_path;
              // console.log(res.data.data.detail);
            })
            .catch((error) => {
              // 处理错误
              console.error(error);
            });
        },
        //获取数据
        aboutData() {
          const url = baseUrl + "/goods.Goods/about";
          axios({
            url: url,
            method: "post",
            params: {
              app_id: 10001,
            },
          })
            .then((res) => {
              // 处理响应结果
              this.details = res.data.data.info;
              console.log(res.data);
            })
            .catch((error) => {
              // 处理错误
              console.error(error);
            });
        },
        goBack() {
          history.go(-1);
        },

        goTocontactus() {
          window.location.href = "contactus.html";
        },
        goToindex() {
          window.location.href = "index.html";
        },
        goToproduct() {
          window.location.href = "product.html";
        },
        goTovideo() {
          window.location.href = "video.html";
        },
      },
    });
    Vue.use(vant);
  </script>
</html>
